<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>山东快缴缴费单位</title>
    <link rel="stylesheet" href="${basePath}/static/css/aLi_tuBiao/iconfont.css">
    <link rel="stylesheet" href="${basePath}/static/css/bank_tuBiao/iconfontBank.css">
    <link rel="stylesheet" href="${basePath}/static/css/element-ui.css">
    <link rel="stylesheet" href="${basePath}/static/css/merchant.css">
    <link rel="stylesheet" href="${basePath}/static/css/zTreeStyle.css">
    <link rel="stylesheet" href="${basePath}/static/layui/css/layui.css">
    <script type="text/javascript" src="${basePath}/static/js/vue.min.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/jquery.min.js"></script>
    <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <script type="text/javascript" src="${basePath}/static/js/merchant/element-ui.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/common.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/merchant/ajaxService.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/merchant/ajaxfileupload.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/merchant/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/merchant/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/merchant/jquery.ztree.exedit.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/merchant/echarts.min.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/merchant/jQuery.md5.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/merchant/common.md5.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/merchant/flexibility.js"></script>
    <script type="text/javascript" src="${basePath}/static/layui/layui.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/es5-shim/4.5.10/es5-sham.js"></script>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/merchant/jquery.form.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/merchant/countUp.js"></script>
    <!--[if IE]>
    <script type="text/javascript" src="${basePath}/static/js/merchant/fuckIE.js"></script>
    <![endif]-->
    <style scoped>
        html, body, #app{
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .el-header{
            padding: 13px 20px;
        }
        .main_head {
            font-size: 16px;
            color: #999;
            margin-bottom: 10px;
        }
        .trend-chart {
            font-size: 16px;
            color: #999;
            padding-top: 20px;
            margin-bottom: 10px;
        }
        .btn-charts{
            color: #fff;
            background-color: #409EFF;
            border-color: #409EFF;
        }
        .box-card-style {
            height: 100px;
            text-align: center;
        }
        .box-card-style b {
            width: 6px;
            height: 6px;
            display: inline-block;
            margin-right: 10px;
            border-radius: 50%;
            vertical-align: middle;
        }
        .el-card__body {
            padding: 20px 0;
        }
        .box-card-style .icon {
            font-size: 24px;
            padding: 2px;
            border-radius: 50%;
            background: #ff4444;
            color: #fff;
        }

        .box-card-style .icon-1 {
            background: #ff4444;
        }
        .box-card-style .icon-yonghu {
            background: #00c192;
        }

        .box-card-style .icon-money {
            background: #fc720b;
        }
        .box-card-style-big {
            height: 100px;
        }
        .header_content i{
            margin-right: 5px;
        }
        .box-card-style-big b {
            width: 24px;
            height: 24px;
            background: #00AAEE;
            color: #fff;
            border-radius: 50%;
            padding: 2px;
            display: inline-block;
            text-align: center;
            line-height: 24px;
        }
        #resetBox .el-dialog__header{
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border-bottom: 1px solid #ff4444;
            width: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            background-color: #fff;
        }
        #resetBox .el-dialog__headerbtn .el-dialog__close{
            color: #ff4444;
            font-size: 22px;

        }
        #resetBox .el-dialog__body{
            padding-top: 75px;
            padding-right:80px;
            padding-bottom: 0px;
        }
        #resetBox .el-dialog{
            width: 500px;
        }
        #resetBox .el-dialog__header{
            text-align: center;
        }
        #resetBox .dialog-footer{
            text-align: center;
        }
        #resetBox .el-input{
            width: 100%;
        }
        #resetBox .passwordWaring{
            color: #fa5555;
            font-size: 12px;
            line-height: 1;
            padding-top: 4px;
            position: absolute;
            top: 100%;
            left: 0;
        }
        .outSystemBox{
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin-left: 45px;
        }
        .el-submenu__title span{
            padding-left: 5px;
        }
        .menuChildBox{
            border-right: 4px solid transparent;
        }
        #app .iconfont{
            color: #ff4444;
        }

        #app .mainPage .iconfont{
            display: inline-block;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            width: 28px;
            height: 28px;
            position: relative;

        }
        #app .mainPage .el-card__body .icon:before{
            /*display: inline-block;*/
            /*width: 20px;*/
            /*height: 20px;*/
            color: #fff;
            font-size: 18px;
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        }

        #app .el-loading-mask{
            z-index: 2000;
        }
        .el-menu-vertical-demo .iconfont{
            font-size: 18px;
        }

        [v-cloak] {
            display: none;
        }
        .el-menu-item.is-active{
            color: #ff4444;
        }
        /*zTree样式*/
        .ztree li span{
            font-size: 14px;
        }
    </style>
</head>
<body>
<el-container id="app"  style="visibility: hidden">
    <el-header class="header header-fixed">
        <el-row >
            <el-col :span="12" class="header_content">
                <el-col :span="8">
                    <img src="${basePath}/static/images/merchant/logo_kuaijiao.png">
                </el-col>
                <el-col :span="16" class="col_666" style="cursor: default">
                    收费单位管理系统
                </el-col>
            </el-col>
            <el-col :span="12" class="text-r header_content" style="height: 33px;">
                <el-col :span="6" :offset="3" style="">
                    <!--<img src="assets/image/my_pic.png">-->
                    <span class="col_666 float-l" style="cursor: default;" v-cloak>当前用户：{{NowUser}}</span>
                </el-col>

                <el-col :span="4">
                    <span class="col_666" style="cursor: pointer" @click="goPage('merchant/notice/getBankNotifyListPage')">银行公告</span>
                </el-col>

                <el-col :span="4" :offset="2"  class="col_666" id="resetId">
                    <i class="icon iconfont icon-xiugai"></i>
                    <span class="col_666">修改密码</span>
                </el-col>
                <el-col :span="4" class="col_666" id="outSystem" style="cursor: default">
                    <div class="outSystemBox" @click="outSystem" style="cursor: pointer;width: 80px">
                        <i class="icon iconfont icon-tuichu"></i>
                        <span class="col_666" style="white-space: nowrap;display: inline-block">退出</span>
                    </div>
                </el-col>
            </el-col>
        </el-row>
    </el-header>
    <el-container>
        <el-aside width="200px">
            <el-menu  default-active="mms-menu.000"
                      class="el-menu-vertical-demo"
                      :unique-opened="isOneOpen"
                      @open="handleOpen"
                      @close="handleClose">
                <el-submenu :index="menu.menuId" v-for="menu in menuData" :key="menu.menuId" v-if="menu.sysMenus">
                    <template slot="title">
                        <i class="icon iconfont" :class="menu.menuIcon"></i>
                        <span v-cloak>{{menu.menuName}}</span>
                    </template>
                    <el-menu-item v-for="item in menu.sysMenus"  :key="item.menuId" :index="item.menuId"
                                  @click="goPage(item.menuUrl)" class="menuChildBox" v-cloak>
                        {{item.menuName}}
                    </el-menu-item>
                </el-submenu>

                <el-menu-item index="mms-menu.000" v-else="" @click="goHome" id="menuHome">
                    <i class="icon iconfont icon-shouye"></i>
                    <span slot="title" style="padding-left: 5px">首页</span>
                </el-menu-item>

            </el-menu>
        </el-aside>
        <el-main class="main-right" >
            <div class="mainPage">
                <el-row>
                    <el-col :span="24">
                        <div class="main_head">数据统计</div>
                    </el-col>
                </el-row>

                <el-row :gutter="20" class="mar_bom_20">
                    <el-col :span="8">
                        <el-card class="box-card box-card-style">
                            <el-col :span="3">
                                <i class="icon iconfont icon-1"></i>
                            </el-col>
                            <el-col :span="8">
                                <div class="col_999 mar_bom_10">缴费用户数</div>
                                <div class="fs_20 col_333" v-cloak ><b class="bg_f44"></b><span id="jiaofeiyonghushu">{{AllUserNumber}}</span></div>
                            </el-col>
                            <el-col :span="13">
                                <div class="col_999 mar_bom_10">今日新增缴费用户数</div>
                                <div class="fs_20 col_333" v-cloak ><b class="bg_f44"></b><span id="jinrixinzengjiaofei">{{TodayUserNumber}}</span></div>
                            </el-col>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card class="box-card box-card-style">
                            <el-col :span="3">
                                <i class="icon iconfont icon-yonghu"></i>
                            </el-col>
                            <el-col :span="8">
                                <div class="col_999 mar_bom_10">签约用户数</div>
                                <div class="fs_20 col_333" v-cloak ><b class="bg_00c192"></b><span id="qianyueyonghushu">{{todayUser}}</span></div>
                            </el-col>
                            <el-col :span="13">
                                <div class="col_999 mar_bom_10">今日签约缴费用户数</div>
                                <div class="fs_20 col_333" v-cloak ><b class="bg_00c192"></b><span id="jinriqianyuejiaofei">{{todayCostUser}}</span></div>
                            </el-col>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card class="box-card box-card-style">
                            <el-col :span="3">
                                <i class="icon iconfont icon-money"></i>
                            </el-col>
                            <el-col :span="8">
                                <div class="col_999 mar_bom_10">交易总数</div>
                                <div class="fs_20 col_333" v-cloak ><b class="bg_fc720b"></b><span id="jiaoyizongshu">{{AllPayNumber}}</span></div>
                            </el-col>
                            <el-col :span="13">
                                <div class="col_999 mar_bom_10">今日新增交易数</div>
                                <div class="fs_20 col_333" v-cloak ><b class="bg_fc720b"></b><span id="jinrixinzengjiaoyi">{{TodayPayNumber}}</span></div>
                            </el-col>
                        </el-card>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-card class="box-card box-card-style-big">
                            <el-col :span="12" class="col_999">
                                <b>总</b>
                                总交易金额
                            </el-col>
                            <el-col :span="12">
                                <div style="margin-top: 20px" class="fs_22 col_fc720b" v-cloak>
                                    ¥<span id="zongjiaoyijine">{{AllPayMoney}}</span>元
                                </div>
                            </el-col>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card class="box-card box-card-style-big">
                            <el-col :span="12" class="col_999">
                                <b>今</b>
                                今交易金额
                            </el-col>
                            <el-col :span="12">
                                <div style="margin-top: 20px" class="fs_22 col_fc720b" v-cloak>
                                    ¥<span id="jinrijiaoyijine">{{TodayPayMoney}}</span>元
                                </div>
                            </el-col>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="trend-chart">走势图</div>
                    </el-col>
                </el-row>
                <el-row style="background-color: #fff;padding: 20px;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);">
                    <el-col :span="24">
                        <el-button style="width: 100px;" class="btn-charts-total btn-charts" size="small" @click="loadTotalCharts">累计</el-button>
                        <el-button style="width: 100px;"  class="btn-charts-add" size="small" @click="loadAddCharts">新增</el-button>
                    </el-col>
                    <el-col :span="24" style="margin: 20px 0;">
                        <el-select @change="latelyCharts" v-model="lately" placeholder="请选择">
                            <el-option label="最近7天" value="7"></el-option>
                            <el-option label="最近15天" value="15"></el-option>
                            <el-option label="最近30天" value="30"></el-option>
                        </el-select>
                        <el-date-picker
                                @change="selectDate"
                                v-model="dates"
                                type="daterange"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="24">
                        <div v-show="isTotal"
                             v-loading="loadingCharts"
                             id="trend-chart"
                             style="width: 100%;height: 400px;"></div>
                        <div v-show="isAdd"
                             v-loading="loadingAddCharts"
                             id="add-trend-chart"
                             style="width: 100%;height: 400px;"></div>
                    </el-col>
                </el-row>
            </div>
        </el-main>
            <!--修改摩玛弹出框-->
        <el-dialog :close-on-click-modal="ismodalClose" title="修改密码" :visible.sync="dialogFormVisible" id="resetBox">
            <el-form :model="form">
                <el-form-item label="原密码：" :label-width="formLabelWidth">
                    <el-input v-model="form.oldPassWord" type="password" @blur="showingWaringBox" auto-complete="off" placeholder="请输入旧密码"></el-input>
                    <span class="passwordWaring">{{oldPassWordInfo}}</span>
                </el-form-item>
                <el-form-item label="新密码：" :label-width="formLabelWidth">
                    <el-input v-model="form.newPassWord" type="password" @blur="showingWaringNewPassBox" placeholder="请输入新密码" auto-complete="off"></el-input>
                    <span class="passwordWaring">{{newPassWordInfo}}</span>
                </el-form-item>
                <el-form-item label="确认密码：" :label-width="formLabelWidth">
                    <el-input v-model="form.reNewPassWord" type="password" @blur="showingWaringResetNewPassBox" placeholder="请再次输入" auto-complete="off"></el-input>
                    <span class="passwordWaring">{{resetNewPassWordInfo}}</span>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="closeResetPass">确 定</el-button>
            </div>
        </el-dialog>
    </el-container>
</el-container>

<!--[if IE]>
<script>
    var IENumber123 = IEVersion();
    if(IENumber123>8 || IENumber123 <= 11 ){
        window.location.href="${basePath}test";
    }
</script>
<![endif]-->

<script>
    javascript:window.history.forward(1);
    $(function () {
            $("#resetId").click(function () {
                app.dialogFormVisible = true;
                    app.form.oldPassWord='';
                    app.form.newPassWord='';
                    app.form.reNewPassWord='';

                    app.oldPassWordInfo='';
                    app.newPassWordInfo='';
                    app.resetNewPassWordInfo='';
            });
        });

    var app =
            new Vue({
                el: "#app",
                data: {todayUser:'0',
                    todayCostUser:'0',
                    AllUserNumber:'0',
                    TodayUserNumber:'0',
                    TodayPayNumber:'0',
                    AllPayNumber:'0',
                    TodayPayMoney:"0",
                    AllPayMoney:'0',


                    loadingCharts:true,// 累计loading
                    loadingAddCharts:false,// 新增loading
                    isTotal:true,// 显示累计图
                    isAdd:false,// 显示新增图
                    dates:[], // 日期选择
                    lately:"30", // 天数下拉框
                    isOneOpen:true,
                    NowUser:'',
                    oldPassWordInfo:'',
                    newPassWordInfo:'',
                    resetNewPassWordInfo:'',
                    ismodalClose:false,
                    menuData: [],
                    dialogFormVisible: false,
                    form: {
                        oldPassWord:'',
                        newPassWord:'',
                        reNewPassWord:'',
                    },
                    formLabelWidth: '120px'
                },
                methods: {
                    // 登录进来加载累计走势图（默认加载最近30天）
                    loadCharts:function(){
                        var kjChart = echarts.init(document.getElementById('trend-chart'));
                        var option = {
                            color:['#ff4444','#00c192','#feb415','#00aaee'],
                            title: {
                                text: '累计折线图'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['累计缴费用户数','累计签约用户数','累计交易总数']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {

                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: []
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name:'',
                                    type:'line',
                                    data:[]
                                },
                            ]
                        };
                        kjChart.setOption(option);
                        var options1 = {};
                        sendService('${basePath}merchant/eCharts/geteCharts',options1,function (resDate) {
                            if(resDate.status == 'success'){
                                app.loadingCharts = false;
                                kjChart.setOption({
                                    xAxis: {
                                        data: resDate.t.date
                                    },
                                    series: resDate.t.series
                                });
                            }
                        });
                    },
                    // 7、15、30change事件
                    latelyCharts:function(){
                        if(app.isTotal){
                            app.loadingCharts = true;
                            var kjChart = echarts.init(document.getElementById('trend-chart'));
                            var option = {
                                color:['#ff4444','#00c192','#feb415','#00aaee'],
                                title: {
                                    text: '累计折线图'
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data:['累计缴费用户数','累计签约用户数','累计交易总数']
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                toolbox: {
                                    feature: {

                                    }
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: []
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [
                                    {
                                        name:'',
                                        type:'line',
                                        stack: '总量',
                                        data:[]
                                    },
                                ]
                            };
                            kjChart.setOption(option);
                            var options1 = {'lately':this.lately};//传参7、15、30
                            sendService('${basePath}merchant/eCharts/geteCharts',options1,function (resDate) {
                                if(resDate.status == 'success'){
                                    app.loadingCharts = false;
                                    kjChart.setOption({
                                        xAxis: {
                                            data: resDate.t.date
                                        },
                                        series: resDate.t.series
                                    });
                                }
                            });
                        } else if(app.isAdd){
                            app.loadingAddCharts = true;
                            var kjAddChart = echarts.init(document.getElementById('add-trend-chart'));
                            var option = {
                                color:['#ff4444','#00c192','#feb415','#00aaee'],
                                title: {
                                    text: '新增折线图'
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data:['新增缴费用户数','新增签约用户数','新增交易总数']
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                toolbox: {
                                    feature: {

                                    }
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: []
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [
                                    {
                                        name:'',
                                        type:'line',
                                        stack: '总量',
                                        data:[]
                                    },
                                ]
                            };
                            kjAddChart.setOption(option);
                            var options1 = {'lately':this.lately};//传参7、15、30
                            sendService('${basePath}merchant/eCharts/geteChartsCum',options1,function (resDate) {
                                if(resDate.status == 'success'){
                                    app.loadingAddCharts = false;
                                    kjAddChart.setOption({
                                        xAxis: {
                                            data: resDate.t.date
                                        },
                                        series: resDate.t.series
                                    });
                                }
                            });
                        }
                    },
                    // 时间段选择
                    selectDate:function(){
                        if(app.isTotal){
                            app.loadingCharts = true;
                            var kjChart = echarts.init(document.getElementById('trend-chart'));
                            var option = {
                                color:['#ff4444','#00c192','#feb415','#00aaee'],
                                title: {
                                    text: '累计折线图'
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data:['累计缴费用户数','累计签约用户数','累计交易总数']
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                toolbox: {
                                    feature: {

                                    }
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: []
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [
                                    {
                                        name:'',
                                        type:'line',
                                        stack: '总量',
                                        data:[]
                                    },
                                ]
                            };
                            kjChart.setOption(option);
                            if(app.dates != null){
                                var options = {'dates':app.dates.join(',')};//传参时间
                                sendService('${basePath}merchant/eCharts/geteCharts',options,function (resDate) {
                                    if(resDate.status == 'success'){
                                        app.loadingCharts = false;
                                        kjChart.setOption({
                                            xAxis: {
                                                data: resDate.t.date
                                            },
                                            series: resDate.t.series
                                        });
                                    }
                                });
                            }else{
                                app.latelyCharts();
                            }
                        }else if(app.isAdd){
                            app.loadingAddCharts = true;
                            var kjAddChart = echarts.init(document.getElementById('add-trend-chart'));
                            var option = {
                                color:['#ff4444','#00c192','#feb415','#00aaee'],
                                title: {
                                    text: '新增折线图'
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data:['新增缴费用户数','新增签约用户数','新增交易总数']
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                toolbox: {
                                    feature: {

                                    }
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: []
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [
                                    {
                                        name:'',
                                        type:'line',
                                        stack: '总量',
                                        data:[]
                                    },
                                ]
                            };
                            kjAddChart.setOption(option);
                            if(app.dates != null){
                                var options1 = {'dates':app.dates.join(',')};//传参时间
                                sendService('${basePath}merchant/eCharts/geteChartsCum',options1,function (resDate) {
                                    if(resDate.status == 'success'){
                                        app.loadingAddCharts = false;
                                        kjAddChart.setOption({
                                            xAxis: {
                                                data: resDate.t.date
                                            },
                                            series: resDate.t.series
                                        });
                                    }
                                });
                            }else{
                                app.latelyCharts();
                            }
                        }
                    },
                    // 新增走势图
                    loadAddCharts:function(){
                        app.isTotal = false;
                        app.isAdd = true;
                        app.loadingAddCharts = true;
                        var width = $("#trend-chart").width();
                        var height = $("#trend-chart").height();
                        $("#add-trend-chart").css("width", width).css("height", height);
                        $(".btn-charts-add").addClass('btn-charts').siblings().removeClass('btn-charts');
//                        console.log($(".btn-charts-add").siblings());
//                        $(".btn-charts-total").removeClass('btn-charts');
                        app.lately = '30';
                        app.dates = [];
                        var kjAddChart = echarts.init(document.getElementById('add-trend-chart'));
                        var option = {
                            color:['#ff4444','#00c192','#feb415','#00aaee'],
                            title: {
                                text: '新增折线图'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['新增缴费用户数','新增签约用户数','新增交易总数']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {

                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: []
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name:'',
                                    type:'line',
                                    stack: '总量',
                                    data:[]
                                },
                            ]
                        };
                        kjAddChart.setOption(option);
                        var options = {};
                        sendService('${basePath}merchant/eCharts/geteChartsCum',options,function (resDate) {
                            if(resDate.status == 'success'){
                                app.loadingAddCharts = false;
                                kjAddChart.setOption({
                                    xAxis: {
                                        data: resDate.t.date
                                    },
                                    series: resDate.t.series
                                });
                            }
                        });
                    },
                    // 累计走势图
                    loadTotalCharts:function(){
                        app.isTotal = true;
                        app.isAdd = false;
                        app.loadingCharts = true;
                        var width = $("#add-trend-chart").width();
                        var height = $("#add-trend-chart").height();
                        $("#trend-chart").css("width", width).css("height", height);
                        $(".btn-charts-total").addClass('btn-charts').siblings().removeClass('btn-charts');
//                        $(".btn-charts-add").removeClass('btn-charts');
                        app.lately = '30';
                        app.dates = [];
                        var kjChart = echarts.init(document.getElementById('trend-chart'));
                        var option = {
                            color:['#ff4444','#00c192','#feb415','#00aaee'],
                            title: {
                                text: '累计折线图'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['累计缴费用户数','累计签约用户数','累计交易总数']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {

                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: []
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name:'',
                                    type:'line',
                                    stack: '总量',
                                    data:[]
                                },
                            ]
                        };
                        kjChart.setOption(option);
                        var options = {};
                        sendService('${basePath}merchant/eCharts/geteCharts',options,function (resDate) {
                            if(resDate.status == 'success'){
                                app.loadingCharts = false;
                                kjChart.setOption({
                                    xAxis: {
                                        data: resDate.t.date
                                    },
                                    series: resDate.t.series
                                });
                            }
                        });

                    },

                    /**
                     * 修改密码
                     */
                    closeResetPass:function(){
                        var that = this;
                        if(this.form.oldPassWord == ''){
                            this.oldPassWordInfo = '请输入原密码';
                            return
                        }
                        if(this.form.newPassWord == ''){
                            this.newPassWordInfo = '请输入新密码';
                            return
                        }
                        if(this.form.newPassWord.length < 6 ||this.form.newPassWord.length > 18){
                            this.newPassWordInfo = '密码长度为6到18个字符';
                            return

                        }
                        if(this.form.reNewPassWord == ''){
                            this.resetNewPassWordInfo = '请再次输入';
                            return
                        }
                        if(this.form.reNewPassWord != this.form.newPassWord){
                            this.resetNewPassWordInfo = '两次密码输入不一致'
                            return
                        }

                        //this.form.reNewPassWord = md5(this.form.reNewPassWord);
                        var options3= {
                            oldPassword:md5(this.form.oldPassWord),
                            newPassword: md5(this.form.reNewPassWord)
                        };
                        sendService('${basePath}/merchant/password/toUpdatePassword', options3, function (resData) {
                            if(resData.status == 'success'){
                                that.loading=false;
                                that.$message({
                                    type: 'success',
                                    message: resData.msg
                                });
                                that.dialogFormVisible = false;

                                setTimeout(function () {
                                    localStorage.clear()
                                    window.location.href="${basePath}/logout";
                                },1000)

                            }else {
                                that.oldPassWordInfo = '原密码错误';
                              that.$message.error(resData.msg);
                            }
                        })

                    },
                    /**
                     * 退出系统
                     */
                    outSystem:function(){
                        var that = this;
                        this.$confirm('确认要退出吗？','提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            localStorage.clear()
                            window.location.href="${basePath}/logout";
                        }).catch(function () {

                        })

                    },
                    showingWaringBox:function(){
                        if(this.form.oldPassWord == ''){
                            this.oldPassWordInfo = "请输入原密码";
                        }
                        if(this.form.oldPassWord != ''){
                            this.oldPassWordInfo = '';
                        }
                    },
                    showingWaringNewPassBox:function(){
                        var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
                        if(this.form.newPassWord == ''){
                            this.newPassWordInfo = '请输入新密码';
                        }
                        if(this.form.newPassWord.length < 6 ||this.form.newPassWord.length > 18){
                            this.newPassWordInfo = '密码长度为6到18个字符';

                        }else {
                            this.newPassWordInfo = '';
                        }

                    },
                    showingWaringResetNewPassBox:function(){
                        if(this.form.newPassWord == ''){
                            this.newPassWordInfo = '请输入新密码';
                            return
                        }
                        if(this.form.reNewPassWord == ''){
                            this.resetNewPassWordInfo = '请再次输入密码';
                            return
                        }
                        if(this.form.reNewPassWord != this.form.newPassWord){
                            this.resetNewPassWordInfo = '两次密码输入不一致'
                        }
                        if(this.form.reNewPassWord === this.form.newPassWord){
                            this.resetNewPassWordInfo = ''
                        }
                    },
                    goPage: function (url) {
                        $(".main-right").empty();
                        $(".main-right").load('${basePath}'+url);
                    },
                    goHome:function(){
                        //reloadPage('${basePath}merchant/first/toMainPage');
                        $(".main-right").empty();
                        $(".main-right").load('${basePath}merchant/first/toMainPage');

                        if($(".menuChildBox").length > 0){
                            $(".menuChildBox").css({"border-right":"none"});
                        }

                    },
                    handleOpen:function(key, keyPath) {
                        console.log(key, keyPath);
                        var menuBox = $(".menuChildBox")  //document.querySelectorAll('.menuChildBox');
                        $(menuBox).click(function (e) {
                            $(menuBox).css({"border-right":"4px solid transparent"});
                            $(this).css({"border-right":"4px solid #ff4444"});

                        })

                    },
                    handleClose:function(key, keyPath) {
                        console.log(key, keyPath);
                    }
                },
                created: function () {
                    $("#app").css({"visibility": "visible"});
                    this.NowUser='${Session['sessionUser'].nickname}'
                    var  loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    var options= {};
                    sendService('${basePath}/system/menu/getMenuByUrl', options, function (resData) {
                        if(resData.status == 'success'){
                            loading.close();
                            app.menuData = resData.t;
                            app.menuData.unshift({
                                menuId: "mms-menu.000",
                                menuName: "首页"
                            });

                        }
                    });

                    var easingFn = function (t, b, c, d) {
                        var ts = (t /= d) * t;
                        var tc = ts * t;
                        return b + c * (tc * ts + -5 * ts * ts + 10 * tc + -10 * ts + 5 * t);
                    };
                    var options = {
                        useEasing: true,
                        easingFn: easingFn,
                        useGrouping: true,
                        separator: ',',
                        decimal: '.',
                    };


                    var that = this;
                    var options= {};
                    sendService('${basePath}/merchant/bind/getUserNumber', options, function (resData) {
                        that.todayUser = resData.t;
                        var demo = new CountUp('qianyueyonghushu', 0, that.todayUser, 0, 1, options);
                            demo.start();
                    });
                    var options1= {};
                    sendService('${basePath}/merchant/bind/getTodayUserNumber', options1, function (resData) {
                        that.todayCostUser = resData.t;
                        var demo1 = new CountUp('jinriqianyuejiaofei', 0, that.todayCostUser, 0, 1, options);
                        demo1.start();
                    });
                    var options2= {};
                    sendService('${basePath}/merchant/feeUserr/getAllUserNumber', options2, function (resData) {
                        that.AllUserNumber = resData.t;
                        var demo2 = new CountUp('jiaofeiyonghushu', 0, that.AllUserNumber, 0, 1, options);
                        demo2.start();
                    });
                    var options3= {};
                    sendService('${basePath}/merchant/feeUserr/getTodayUserNumber', options3, function (resData) {
                        that.TodayUserNumber = resData.t;
                        var demo3 = new CountUp('jinrixinzengjiaofei', 0, that.TodayUserNumber, 0, 1, options);
                        demo3.start();
                    });

                    var options4= {};
                    sendService('${basePath}/merchant/payment/getTodayPayNumber', options4, function (resData) {
                        that.TodayPayNumber = resData.t;
                        var demo4 = new CountUp('jinrixinzengjiaoyi', 0, that.TodayPayNumber, 0, 1, options);
                        demo4.start();
                    });

                    var options5= {};
                    sendService('${basePath}/merchant/payment/getAllPayNumber', options5, function (resData) {
                        that.AllPayNumber = resData.t;
                        var demo5 = new CountUp('jiaoyizongshu', 0, that.AllPayNumber, 0, 1, options);
                        demo5.start();
                    });

                    var options6= {};
                    sendService('${basePath}/merchant/payment/getTodayPayMoney', options6, function (resData) {
                        var totalCost = resData.t;
                        //that.TodayPayMoney = fmoney(totalCost, 2);
                        that.TodayPayMoney = totalCost;
                        var demo6 = new CountUp('jinrijiaoyijine', 0, that.TodayPayMoney, 2, 1, options);
                        demo6.start();
                    });

                    var options7= {};
                    sendService('${basePath}/merchant/payment/getAllPayMoney', options7, function (resData) {
                        var totalCost = resData.t;
                        //that.AllPayMoney = fmoney(totalCost, 2);
                        that.AllPayMoney = totalCost;
                        var demo7 = new CountUp('zongjiaoyijine', 0, that.AllPayMoney, 2, 1, options);
                        demo7.start();

                    });


                },
                mounted:function () {
                    this.loadCharts();
                }
            });


    /**
     * 格式化货币
     * @param s  需要格式化的货币金额
     * @param n  保留几位小数
     * @returns {string}
     */
    function fmoney(s, n)
    {
        n = n > 0 && n <= 20 ? n : 2;
        s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
        var l = s.split(".")[0].split("").reverse(),
            r = s.split(".")[1];
        t = "";
        for(i = 0; i < l.length; i ++ )
        {
            t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
        }
        return t.split("").reverse().join("") + "." + r;
    }

</script>
</body>
</html>